Navigation Bars
Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of LinksA navigation bar uses standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the<ul> and <li> elements makes perfect sense
Example:
-
<ul>
<li><ahref="default.asp">Home</a></li> -
<li><ahref="news.asp">News</a></li> -
<li><ahref="contact.asp">Contact</a></li> -
<li><ahref="about.asp">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list
Example:
ul ｛
list-style-type: none;
margin: 0;
padding: 0;
}
Example Explained:
list-style-type:none;-
Removes the bullets. A navigation bar does not need list markers
Set margin:0; and padding:0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code above
Example
li a ｛
display:block;
width:60xp;
}
Example Explained:
display:block; -
width:60xp; -
Block elements take up the full width available by default. We want to specify a 60 pixels width
You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous
Example:
ul ｛
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a ｛
display: block;
}
Vertical Navigation Bar Examples
Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them
Example:
ul ｛
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a ｛
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/﹡ Change the link color on hover ﹡/
li a:hover ｛
background-color: #555;
color: white;
}